<template>
    <div class="wrapper">
        <div class="main">
            <el-row class="main-top" :gutter="20">
                <!-- 会员注册数 -->
                <el-col :sm="12" :lg="6">
                    <el-card class="top-card" shadow="hover">
                        <el-row justify="start">
                            <el-col :span="15" class="title-box">
                                <div class="title-top">{{ t('dashboard.Member registration') }}</div>
                                <div class="title-center">5,456 <i class="fa fa-level-up" aria-hidden="true"></i></div>
                            </el-col>
                            <el-col :span="6" class="top-progress" :push="3">
                                <el-progress type="dashboard" :percentage="51" :width="60" :color="colors" />
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
                <!-- 附件上传数 -->
                <el-col :sm="12" :lg="6">
                    <el-card class="top-card" shadow="hover">
                        <el-row justify="start">
                            <el-col :span="15" class="title-box">
                                <div class="title-top">{{ t('dashboard.Attachment uploading') }}</div>
                                <div class="title-center">1,234 <i class="fa fa-level-up" aria-hidden="true"></i></div>
                            </el-col>
                            <el-col :span="6" class="top-progress" :push="3">
                                <el-progress type="dashboard" :percentage="83" :width="60" :color="colors" />
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
                <!-- 会员总数 -->
                <el-col :sm="12" :lg="6">
                    <el-card class="top-card" shadow="hover">
                        <el-row justify="start">
                            <el-col :span="15" class="title-box">
                                <div class="title-top">{{ t('dashboard.Total number of members') }}</div>
                                <div class="title-center">9,486 <i class="fa fa-level-up" aria-hidden="true"></i></div>
                            </el-col>
                            <el-col :span="6" class="top-progress" :push="3">
                                <el-progress type="dashboard" :percentage="43" :width="60" :color="colors" />
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
                <!-- 模块安装数 -->
                <el-col :sm="12" :lg="6">
                    <el-card class="top-card" shadow="hover">
                        <el-row justify="start">
                            <el-col :span="15" class="title-box">
                                <div class="title-top">{{ t('dashboard.Module downloads') }}</div>
                                <div class="title-center">1,329 <i class="fa fa-level-up" aria-hidden="true"></i></div>
                            </el-col>
                            <el-col :span="6" class="top-progress" :push="3">
                                <el-progress type="dashboard" :percentage="65" :width="60" :color="colors" />
                            </el-col>
                        </el-row>
                    </el-card>
                </el-col>
            </el-row>
            <el-row class="main-center" :gutter="20">
                <!-- 欢迎区 -->
                <el-col :xs="24" :sm="24" :md="24" :lg="6">
                    <el-card class="card-message" shadow="hover">
                        <div class="msg-title-box">
                            <h4 class="title">{{ t('dashboard.Wellcom Back') }}, {{ adminInfo.nickname }}!!</h4>
                            <p class="msg">
                                {{ t('dashboard.Notice') }}
                            </p>
                        </div>
                        <div class="wellcom-div"></div>
                    </el-card>
                </el-col>
                <!-- 附件加下数 -->
                <el-col :xs="24" :sm="24" :md="24" :lg="12">
                    <el-card class="center-card" shadow="hover">
                        <h6>{{ t('dashboard.Attachment Downloads') }}</h6>
                        <div class="view-column" :ref="chartRefs.set"></div>
                    </el-card>
                </el-col>
                <!-- 用户来源 -->
                <el-col :xs="24" :sm="24" :md="24" :lg="6">
                    <el-card class="center-card" shadow="hover">
                        <h6 class="user-source">{{ t('dashboard.Source Of User') }}</h6>
                        <div class="view-pie" :ref="chartRefs.set"></div>
                    </el-card>
                </el-col>
            </el-row>
            <el-row class="main-slide" :gutter="20">
                <el-col :xs="24" :sm="24" :md="24" :lg="12">
                    <el-card shadow="hover">
                        <div class="slide-box">
                            <el-col :span="12">
                                <div class="slide-box-title">
                                    <i class="fa fa-file-archive-o" aria-hidden="true"></i> ZIP{{ t('dashboard.Export') }}
                                </div>
                                <h5>1,245</h5>
                            </el-col>
                            <el-col :span="12"
                                ><el-progress :text-inside="true" :stroke-width="24" :percentage="52" status="success" color="#188df0"
                            /></el-col>
                        </div>
                    </el-card>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="12">
                    <el-card shadow="hover">
                        <div class="slide-box">
                            <el-col :span="12">
                                <div class="slide-box-title"><i class="fa fa-file-pdf-o" aria-hidden="true"></i> PDF{{ t('dashboard.Export') }}</div>
                                <h5>1,872</h5>
                            </el-col>
                            <el-col :span="12"><el-progress :text-inside="true" :stroke-width="24" :percentage="73" status="success" /></el-col>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <el-row class="main-bottom" :gutter="20">
                <!-- 交易量报告-->
                <el-col :xs="24" :sm="24" :md="12" :lg="6">
                    <el-card class="bottom-card" shadow="hover">
                        <h6>{{ t('dashboard.Trading Volume Report') }}</h6>
                        <div class="bottom-reports">
                            <div>{{ t('dashboard.Available balance') }}</div>
                            <h3>￥87,3256</h3>
                            <div class="reports-more">
                                <div class="color-info">{{ t('dashboard.BUY THIS MONTH') }}</div>
                                <h5>￥5,2345</h5>
                                <div class="color-info">{{ t('dashboard.SELL THIS MONTH') }}</div>
                                <h5>￥6,2745</h5>
                            </div>
                            <el-button class="button-more" type="primary" round>{{ t('dashboard.See More') }}</el-button>
                        </div>
                    </el-card>
                </el-col>
                <!-- 会员增长率 -->
                <el-col :xs="24" :sm="24" :md="12" :lg="6">
                    <el-card class="bottom-card" shadow="hover">
                        <h6>{{ t('dashboard.Membership Growth') }}</h6>
                        <div class="bottom-content">
                            <el-row class="content-info" align="middle" justify="space-between">
                                <el-col :span="15">
                                    <div class="info-circle circle-orange"></div>
                                    <span class="info-title">{{ t('dashboard.Legend') }}</span></el-col
                                >
                                <el-col :span="9"><el-progress :percentage="56" color="orange" /></el-col>
                                <el-divider />
                            </el-row>
                            <el-row class="content-info" align="middle" justify="space-between">
                                <el-col :span="15">
                                    <div class="info-circle circle-violet"></div>
                                    <span class="info-title">{{ t('dashboard.Epic') }}</span></el-col
                                >
                                <el-col :span="9"><el-progress :percentage="69" color="#c507f5" /></el-col>
                                <el-divider />
                            </el-row>
                            <el-row class="content-info" align="middle" justify="space-between">
                                <el-col :span="15">
                                    <div class="info-circle circle-blue"></div>
                                    <span class="info-title">{{ t('dashboard.Rare') }}</span></el-col
                                >
                                <el-col :span="9"><el-progress :percentage="45" /></el-col>
                                <el-divider />
                            </el-row>
                            <el-row class="content-info" align="middle" justify="space-between">
                                <el-col :span="15">
                                    <div class="info-circle circle-green"></div>
                                    <span class="info-title">{{ t('dashboard.Excellent') }}</span></el-col
                                >
                                <el-col :span="9"><el-progress :percentage="55" color="green" /></el-col>
                                <el-divider />
                            </el-row>
                            <el-row class="content-info" align="middle" justify="space-between">
                                <el-col :span="15">
                                    <div class="info-circle circle-silver"></div>
                                    <span class="info-title">{{ t('dashboard.Common') }}</span></el-col
                                >
                                <el-col :span="9"><el-progress :percentage="78" color="silver" /></el-col>
                            </el-row>
                        </div>
                    </el-card>
                </el-col>
                <!-- 访问增长量 -->
                <el-col :xs="24" :sm="24" :md="24" :lg="12"
                    ><el-card class="bottom-card" shadow="hover">
                        <h6>{{ t('dashboard.Access Growth') }}</h6>
                        <div class="visitor-box" :ref="chartRefs.set"></div
                    ></el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useTemplateRefsList } from '@vueuse/core'
import * as echarts from 'echarts'
import { onMounted, nextTick, reactive, onActivated, onBeforeMount, watch } from 'vue'
import { useNavTabs } from '/@/stores/navTabs'
import { useAdminInfo } from '/@/stores/adminInfo'
import { useI18n } from 'vue-i18n'

const navTabs = useNavTabs()
const adminInfo = useAdminInfo()
const { t } = useI18n()
const state: {
    charts: any[]
} = reactive({
    charts: [],
})

const chartRefs = useTemplateRefsList<HTMLDivElement>()

const colors = [
    { color: '#f56c6c', percentage: 20 },
    { color: '#e6a23c', percentage: 40 },
    { color: '#5cb87a', percentage: 60 },
    { color: '#1989fa', percentage: 80 },
    { color: '#6f7ad3', percentage: 100 },
]

const initUserGrowthChart = () => {
    const userGrowthChart = echarts.init(chartRefs.value[0] as HTMLElement)
    // prettier-ignore
    let dataAxis = [
        t('dashboard.Jan'),t('dashboard.Feb'),t('dashboard.Mar'),t('dashboard.Apr'),t('dashboard.May'),t('dashboard.Jun')
        ,t('dashboard.Jul'),t('dashboard.Aug'),t('dashboard.Sept'),t('dashboard.Oct'),t('dashboard.Nov'),t('dashboard.Jan'),];
    // prettier-ignore
    let data = [220, 182, 191, 234, 290, 98, 138, 191, 234, 290, 99, 180];
    let yMax = 500
    let dataShadow = []

    for (let i = 0; i < data.length; i++) {
        dataShadow.push(yMax)
    }

    const option = {
        xAxis: {
            data: dataAxis,
            axisLabel: {
                inside: true,
                color: '#fff',
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            z: 10,
        },
        yAxis: {
            axisLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                color: '#999',
            },
        },
        dataZoom: [
            {
                type: 'inside',
            },
        ],
        series: [
            {
                type: 'bar',
                showBackground: true,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#83bff6' },
                        { offset: 0.5, color: '#188df0' },
                        { offset: 1, color: '#188df0' },
                    ]),
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#2378f7' },
                            { offset: 0.7, color: '#2378f7' },
                            { offset: 1, color: '#83bff6' },
                        ]),
                    },
                },
                data: data,
            },
        ],
    }

    // Enable data zoom when user click bar.
    const zoomSize = 6
    userGrowthChart.on('click', function (params) {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)])
        userGrowthChart.dispatchAction({
            type: 'dataZoom',
            startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
            endValue: dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)],
        })
    })
    userGrowthChart.setOption(option)
    state.charts.push(userGrowthChart)
}

const initUserSource = () => {
    const userSource = echarts.init(chartRefs.value[1] as HTMLElement)
    const option = {
        tooltip: {
            trigger: 'item',
        },
        legend: {
            top: '5%',
            left: 'center',
            textStyle: {
                color: '#73767a',
            },
        },
        series: [
            {
                name: t('dashboard.Source details'),
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center',
                    color: '#73767a',
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '15',
                        fontWeight: 'bold',
                    },
                },
                labelLine: {
                    show: false,
                },
                data: [
                    { value: 430, name: t('dashboard.Blogs') },
                    { value: 735, name: t('dashboard.Baidu') },
                    { value: 580, name: t('dashboard.Aboard') },
                    { value: 484, name: t('dashboard.GitHub') },
                    { value: 300, name: t('dashboard.Other') },
                ],
            },
        ],
    }
    userSource.setOption(option)
    state.charts.push(userSource)
}

const initUserAdd = () => {
    const userAdd = echarts.init(chartRefs.value[2] as HTMLElement)
    const option = {
        xAxis: {
            type: 'category',
            data: [
                t('dashboard.Monday'),
                t('dashboard.Tuesday'),
                t('dashboard.Wednesday'),
                t('dashboard.Thursday'),
                t('dashboard.Friday'),
                t('dashboard.Saturday'),
                t('dashboard.Sunday'),
            ],
        },
        yAxis: {
            type: 'value',
        },
        series: [
            {
                data: [150, 230, 224, 218, 135, 147, 260],
                type: 'line',
            },
        ],
    }
    userAdd.setOption(option)
    state.charts.push(userAdd)
}

const echartsResize = () => {
    nextTick(() => {
        for (const key in state.charts) {
            state.charts[key].resize()
        }
    })
}

onMounted(() => {
    initUserGrowthChart()
    initUserSource()
    initUserAdd()
    window.addEventListener('resize', echartsResize)
})

onBeforeMount(() => {
    for (const key in state.charts) {
        state.charts[key].dispose()
    }
    window.removeEventListener('resize', echartsResize)
})

onActivated(() => {
    echartsResize()
})
watch(
    () => navTabs.state.tabFullScreen,
    () => {
        echartsResize()
    }
)
</script>

<style scoped lang="scss">
.wrapper {
    margin: 30px;

    .ba-card-border {
        // border style
        border: 1px;
        border-style: dashed;
        border-color: #e9e6e1;
        border-radius: 0.75rem;
    }
    .main {
        .main-top {
            > * {
                margin-top: 1rem;
                max-width: 100%;
            }
            .top-card {
                @extend .ba-card-border;
                --el-card-padding: 2rem;
                display: flex;
                flex-direction: column;

                .title-box {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-evenly;
                    .title-top {
                        font-size: var(--el-font-size-extra-small);
                    }

                    .title-center {
                        font-size: 2rem;
                        font-weight: bold;
                        i {
                            color: #9399a1;
                            font-size: var(--el-font-size-extra-small);
                        }
                    }
                }

                .top-progress {
                    display: flex;
                    justify-content: start;
                }
            }
        }

        .main-center {
            margin-top: 1rem;
            > * {
                margin-top: 1rem;
            }
            .card-message {
                height: 100%;
                @extend .ba-card-border;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: end;
                :deep(.el-card__body) {
                    padding: 0;
                }
                .msg-title-box {
                    margin-bottom: 8rem;
                    padding: 2rem 4rem 0rem 3rem;
                    .title {
                        color: var(--el-text-color-primary);
                        font-size: 2rem;
                        text-align: center;
                    }
                    .msg {
                        color: var(--el-text-color-primary);
                        text-align: center;
                        margin-top: 1rem;
                    }
                }

                .wellcom-div {
                    margin-top: 2rem;
                    width: 100%;
                    position: relative;
                    text-align: center;
                    background: url('/@/assets/ripple.gif') 100% 40% no-repeat;
                    height: 50px;
                }
            }
            .center-card {
                @extend .ba-card-border;
                --el-card-padding: 25px 15px 15px 20px;
                font-weight: 600;
                height: 100%;
                .user-source {
                    margin-bottom: 20px;
                }
                .view-column {
                    height: 30rem;
                }
                .view-pie {
                    height: 30rem;
                }
            }
        }

        .main-slide {
            margin-top: 1rem;
            > * {
                margin-top: 1rem;
            }
            .el-card {
                @extend .ba-card-border;
                height: 8rem;
                height: 100%;
            }
            :deep(.el-card__body) {
                height: 100%;
            }
            .slide-box {
                display: flex;
                align-items: center;
                height: 100%;
                text-align: center;
                .slide-box-title {
                    display: inline;
                    font-size: var(--el-font-size-medium);
                    margin-right: 0.5rem;
                }
            }
        }

        .main-bottom {
            margin-top: 1rem;
            > * {
                margin-top: 1rem;
            }
            .bottom-card {
                height: 100%;
                @extend .ba-card-border;
                --el-card-padding: 25px 15px 15px 20px;
                :deep(.el-card__body) {
                    height: 100%;
                }
                .bottom-reports {
                    margin: 4rem 1.5rem 0 1.5rem;
                    font-size: var(--el-font-size-medium);
                    h3 {
                        margin-top: 1rem;
                    }
                    h5 {
                        margin: 0.5rem 0 1rem 0;
                    }
                    .reports-more {
                        margin-top: 2rem;
                        .color-info {
                            color: var(--el-color-info);
                            font-size: var(--el-font-size-medium);
                        }
                    }

                    .button-more {
                        width: 100%;
                        margin-top: 1rem;
                    }
                }

                .bottom-content {
                    margin: 4rem 1.5rem 0 1.5rem;
                    .content-info {
                        .info-circle {
                            width: 0.8rem;
                            height: 0.8rem;
                            border-radius: 50%;
                            display: inline-block;
                        }
                        .info-title {
                            margin-left: 0.5rem;
                        }
                        :deep(.el-progress__text) {
                            min-width: 0;
                        }
                        .circle-orange {
                            background-color: orange;
                        }
                        .circle-violet {
                            background-color: #c507f5;
                        }
                        .circle-blue {
                            background-color: blue;
                        }
                        .circle-green {
                            background-color: green;
                        }
                        .circle-silver {
                            background-color: silver;
                        }
                    }
                }

                .visitor-box {
                    height: 400px;
                }
            }
        }
    }
}

h3 {
    display: inline-block;
    font-size: 2.5rem;
    line-height: 1.2;
    font-weight: 500;
}
h5 {
    display: inline-block;
    font-size: 1.7rem;
    font-weight: 500;
    line-height: 1.2;
}
h6 {
    display: inline-block;
    font-size: 1.2rem;
    line-height: 1.2;
    font-weight: 600;
}
// 暗黑样式
@at-root .dark {
    .ba-card-border {
        border-color: #353535;
    }
    .wellcom-div {
        background: none !important;
    }
}
</style>
